/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    Ext.translate.Manager.Init({URL : '../../TranslateServlet',
        languageImagesURL : '../../img/flags/',
        autocreateIonsCSS : true,
        id : 'singleform',
        autoload : true
        ,cookieReset : true
        });
    
    Ext.QuickTips.init();

    var languageId = Ext.id();
    var _formPanel = new Ext.form.FormPanel({
        region: 'center',
        border: false,
        bodyStyle: "padding: 5px;",
        baseCls: 'x-plain',
        labelWidth: 'auto',
        defaults: {
          width: 250
        },
        items: [
          {
            xtype: 'iconcombo',
            id: languageId,
            fieldLabel: 'Select Language',
            store: new Ext.data.SimpleStore({
              fields: ['languageCode', 'languageName', 'countryFlag'],
              data: Ext.translate.languages
            }),
            valueField: 'languageName',
            value: Ext.translate.defaultLanguage,
            displayField: 'languageName',
            iconClsField: 'countryFlag',
            triggerAction: 'all',
            editable: false,
            disabled : true ,
            mode: 'local'
          }   ]

      });    
     
     var selector = Ext.getCmp(languageId);
     selector.on('render',
   		  function() {
   	  
   	  		var fn = function (){
   	  				  
   					  Ext.getCmp(languageId).store.loadData(Ext.translate.languages);
   					  Ext.translate.Manager.generateFlagsCSS(Ext.translate.languages);
   					  Ext.getCmp(languageId).enable();	  	
   					  Ext.getCmp(languageId).setValue(Ext.translate.currentLanguage);
   	  		};	
   	  
   	  		Ext.translate.Manager.getSupportedLanguages(fn.createDelegate(this));
   	  		  
   		  }, this);
     

     selector.on('select', function() {	
   	      var cmp = Ext.getCmp(languageId);
   	      Ext.translate.Manager.setlanguage(cmp.getValue());
   	      Ext.translate.Manager.applyTranslation();
     });
     
     _formPanel.render(document.body);
     
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    }
    // shorthand alias
    var fm = Ext.form;

    var colmcfg = [{
			        id: 'common',
			        header: 'Common Name',
			        dataIndex: 'common',
			        tooltip : 'Just for test',
			        width: 220,
			        // use shorthand alias defined above
			        editor: new fm.TextField({
			            allowBlank: false
			        })
			     },{
			        header: 'Light',
			        dataIndex: 'light',
			        width: 130,
			        editor: new fm.ComboBox({
			            typeAhead: true,
			            triggerAction: 'all',
			            transform:'light',
			            lazyRender: true,
			            listClass: 'x-combo-list-small'
			         })
			     },{
			        header: 'Price',
			        dataIndex: 'price',
			        width: 70,
			        align: 'right',
			        renderer: 'usMoney',
			        editor: new fm.NumberField({
			            allowBlank: false,
			            allowNegative: false,
			            maxValue: 100000
			        })
			     },{
			        header: 'Available',
			        dataIndex: 'availDate',
			        width: 95,
			        renderer: formatDate,
			        editor: new fm.DateField({
			             format: 'm/d/y',
			             minValue: '01/01/06',
			             disabledDays: [0, 6],
			             disabledDaysText: 'Plants are not available on the weekends'
			         })
			     }
			 ];
        
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel(colmcfg);

    // by default columns are sortable
    cm.defaultSortable = true;

    // create the Data Store
    var store = new Ext.data.Store({
        // load remote data using HTTP
        url: 'plants.xml',

        // specify a XmlReader (coincides with the XML format of the returned data)
        reader: new Ext.data.XmlReader(
            {
                // records will have a 'plant' tag
                record: 'plant'
            },
            // use an Array of field definition objects to implicitly create a Record constructor
            [
                // the 'name' below matches the tag name to read, except 'availDate'
                // which is mapped to the tag 'availability'
                {name: 'common', type: 'string'},
                {name: 'botanical', type: 'string'},
                {name: 'light'},
                {name: 'price', type: 'float'},             
                // dates can be automatically converted by specifying dateFormat
                {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
                {name: 'indoor', type: 'bool'}
            ]
        ),

        sortInfo: {field:'common', direction:'ASC'}
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width: 600,
        height: 300,
        autoExpandColumn: 'common',
        title: 'Edit Plants?',
        frame: true,
        clicksToEdit: 1,
        tbar: [{
            text: 'Add Plant',
            handler : function(){
                // access the Record constructor through the grid's store
                var Plant = grid.getStore().recordType;
                var p = new Plant({
                    common: 'New Plant 1',
                    light: 'Mostly Shade',
                    price: 0,
                    availDate: (new Date()).clearTime(),
                    indoor: false
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        }],
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying results {0} - {1} of {2}',
            emptyMsg: "No results to display"
        })
    });

    // trigger the data store load
    store.load();
});